<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="js/json2.js"></script>
	<script type="text/javascript" src="js/dialog.pc.js"></script>
	
	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="css/cpCommon.css" type="text/css" media="screen"/>
	<link rel="stylesheet" href="css/dialog.pc.css" type="text/css" media="screen"/>
	
	<style type="text/css">
		.topBody {

		}
		
		.topBody>.content {
			width: 400px;
			background-color: white;
			border: 1px solid #c6c2c2;
			position: fixed;
			right: calc(50% - 200px);
			top: calc(50% - 200px);
		}
		
		.topBody>.loginArea {

		}
		
		.topBody>.content>.title {
			width: 100%;
			text-align: center;
			background-color: #e7e7e7;
			height: 46px;
			line-height: 46px;
		}
		
		.topBody>.loginArea>.loginTitle {

		}
		
		.topBody>.content>.iptArea {
			text-align: center;
		}
		
		.topBody>.loginArea>.inputArea {
		
		}


		.topBody>.content>.iptArea>.ipt {
		    width: 240px;
		    height: 36px;
		    margin-top: 10px;
		}		
		
		.topBody>.loginArea>.inputArea>.ipt {

		}
		
		.topBody>.loginArea>.inputArea>.userName {
		}
		
		.topBody>.loginArea>.inputArea>.password {
		}
		
		.topBody>.content>.optionArea {
		    width: 240px;
		    margin: 20px auto;
		}
		
		.topBody>.content>.optionArea>.choice {
			float: left;
			color: blue;
			font-size: 12px;
			cursor: pointer;
		}
		
		.topBody>.content>.optionArea>.btn {
			float: right;
		    cursor: pointer;
		    width: 80px;
		    background-color: cornflowerblue;
		    color: white;
		    text-align: center;
		}
		
		.topBody>.registerArea {
		}
		
		.topBody>.registerArea>.registerTitle {
		}
		
		.topBody>.registerArea>.inputArea {
		}
		
		.topBody>.registerArea>.inputArea>.ipt {
		}
		
		.topBody>.registerArea>.inputArea>.userName {
		}
		
		.topBody>.registerArea>.inputArea>.password {
		}
		
		.middleBody {
		}
		.middleBody>.promptText {
		}
		
		.footBody {
			position: fixed;
			bottom: 20px;
			left: calc(50% - 200Px);
		}
		
		.footBody>.footText {
		}
	</style>
<title>登录/注册</title>
</head>
<body>
	<div class="topBody">	
		<div class="content loginArea" id="loginArea">
			<div class="title loginTitle">登录</div>
			<div class="iptArea inputArea">
				<input class="ipt userName" id="lUserName" placeholder="用户名"/>
				<input class="ipt password" type="password" id="lPassword" placeholder="密码"/>
			</div>
			<div class="optionArea">
				<div class="choice choiceRegister" id="choiceRegister">没有账号，现在注册</div>
				<div class="btn login" id="login">登录</div>
				<div class="clear"></div>
			</div>
		</div>
		
		<div class="content registerArea hidden" id="registerArea">
			<div class="title registerTitle">注册</div>
			<div class="iptArea inputArea">
				<input class="ipt userName" id="rUserName" placeholder="用户名"/>
				<input class="ipt password" type="password"	id="rPassword1" placeholder="密码"/>
				<input class="ipt password" type="password" id="rPassword2" placeholder="再次输入密码"/>
			</div>
			<div class="optionArea">
				<div class="choice choiceLogin" id="choiceLogin">有账号，直接登录</div>
				<div class="btn register" id="register">注册</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="middleBody hidden">
		<div class="promptText"></div>
	</div>
	<div class="footBody">
		<div class="footText">Copyright © 2015-2017 重庆一天网络科技发展有限公司 版权所有</div>
	</div>
	
	<script type="text/javascript">	
		function clickEvent() {
			$('#choiceRegister').click(function() {
				$('#registerArea').removeClass('hidden');
				$('#loginArea').addClass('hidden');
				});
			
			$('#choiceLogin').click(function() {
				$('#loginArea').removeClass('hidden');
				$('#registerArea').addClass('hidden');
				});
			
			$('#login').click(function() {
				login();
			});
			
			$('#register').click(function() {
				reguster();
			});
			
			$('#rUserName').blur(function() {
				$.post('cp0000/checkUserName', {
					account: $('#rUserName').val()
				}, function(result) {
					if(!result) {							
					$.zjb_dialog.alert('请注意', "用户名已被注册");
					return;
					}
				}, 'json');
			});
		}
		
		function login() {
			var userName = $('#lUserName').val();
			var password = $('#lPassword').val();
			
			var toCheck = {
					userName: { hint: '用户名', value: userName },
					password: { hint: '密码', value: password },
				};
			
			if (!validate(toCheck))
					return;
			
			$.post('cpCommon/login', {
				account: userName,
				password: password
			}, function(result) {
				if(result) {
					window.location = 'cp0001';
					return;
				}
				
				$.zjb_dialog.alert('登录失败', '请检查账号和密码');				
			}, 'json');
		}
		
		function reguster() {
			var userName = $('#rUserName').val();
			var Password1 = $('#rPassword1').val();
			var Password2 = $('#rPassword2').val();
			
			var toCheck = {
					userName: { hint: '用户名', value: userName },
					Password1: { hint: '密码', value: Password1 },
				};
			
			if (!validate(toCheck))
					return;
			
			if(!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/).test(userName)){
				$.zjb_dialog.alert("用户名必须为邮箱");
				return;
			}
			
			if(!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/).test(Password1)){
				$.zjb_dialog.alert("密码格式为：6-16位数字和字母的组合");
				return;
			}
			
			if(!Password2){
				$.zjb_dialog.alert("请再次输入密码");
				return;
			}
			
			if(Password1 != Password2) {
				$.zjb_dialog.alert("密码不一致");
				return;
			}
			
			$.post('cp0000/register', {
				account: userName,
				password: Password1
			}, function(result) {
				if(result) {
					$('#loginArea').removeClass('hidden');
					$('#registerArea').addClass('hidden');
					return;
				}
				
				$.zjb_dialog.alert('注册失败', '请稍后再试');
			}, 'json');
		}
		
		function validate(data) {
			var toHint = [];
			for (var k in data) {
				var item = data[k];
				var value = item.value;
				var hint = item.hint;
				
				if (!value)
					toHint.push(hint);
			}
			
			if (toHint.length == 0)
				return true;
			
			var message = toHint.join('、') + '不能为空';
			$.zjb_dialog.alert('注意', message);
			return false;
		}
		
		function pageLoad() {
			clickEvent();
		}
		
		$(document).ready(pageLoad);
	</script>
</body>
</html>